<template>
  <div class="bodystyle">
    <div class="topBtns">
      好友列表
    </div>
    <div class="demo-input-suffix father">
      <el-input
        placeholder="查找好友"
        prefix-icon="el-icon-search"
        v-model="SearchInfo"
        @input="querySearch"
      >
      </el-input>
    </div>

    <div class="aSingleMsg" v-for="item in FriendList" @click="showFriendInfo(item)">
      <div class="avatar">
        <el-avatar :size="50" :src=item.avatar></el-avatar>
      </div>
      <div class="mes">
        <div>
          <span style="font-family:'Avenir', Helvetica, Arial, sans-serif;font-size: 16px;">{{item.username}}</span>
        </div>
        <div>
          <span class="content">{{item.content}}</span>
        </div>
      </div>
    </div>


  </div>
</template>
<script>
    export default {
        name: "FriendList",
        props: ["weidth_H", "FriendList"],
        data() {
            return {
                SearchInfo: '',
                // FriendList: this.$global_variable.friendList ,
                DefaultFriendList: this.$global_variable.friendList,
            }
        },
        methods: {

            //input输入搜索字符后与Friendlist匹配返回搜索到的结果
            querySearch() {
                console.log(this.SearchInfo + "输入字符长度：" + this.SearchInfo.length);
                var list = this.FriendList;
                var arr = [];
                for (var i = 0; i < list.length; i++) {
                    if (list[i].username.indexOf(this.SearchInfo) >= 0 || list[i].uid.indexOf(this.SearchInfo) >= 0) {
                        arr.push(list[i]);
                    }
                    // console.log(list[i].username);
                    // console.log("这是第" + i+"次循环!");
                }
                if (this.SearchInfo.length != 0) {
                    this.FriendList = arr;
                    // console.log(list);
                } else {
                    this.FriendList = this.DefaultFriendList;

                }
            },
            // 点击好友后，会进入好友的详情列表
            showFriendInfo(info) {
                this.$emit('showFriendCard', info)
            }
        }
    }

</script>
<!--scoped-->
<style>
  .father .el-input {
    margin: 12px auto 6px;
    max-width: 280px;
    min-width: 190px;
  }

  .father .el-input__inner {
    border-radius: 20px;
  }
  .father{
    background-color: rgb(228, 228, 228);
  }

  .bodystyle {
    background-color: #f9f8f7;
    height: 100%;
  }

  .list {
    /*max-width: 270px;*/
    background-color: #e4e4e4;
    /*background-color:rgb(240,235,229);*/
    min-width: 245px;
    margin: 10px auto;
    width: 100%;
    /*border-radius: 10px;*/
    text-align: left;
    padding: 5px 15px;
    display: flex;
  }
  .aSingleMsg{
    height: 50px;
    text-align: left;
    position: relative;
    padding: 10px;
    border-style: solid;
    border-color: #EBEEF5;
    border-width: 1px 0 1px 0;
    overflow-y: hidden;
  }

  .mes {
    margin: auto auto auto 20px;
    text-align: left;
    left: 100px;
    /*display: inline-block;*/
    align-items: center;
  }
  .content{
    color: #8c939d;
    font-size: 15px;
    overflow: hidden;
    width: 10%;
    line-height: 35px;
  }
  .avatar {
    /*!*display: flex;*!*/
    /*align-items: center;*/
    /*height: 50px;*/
    /*width: 50px;*/
    /*justify-content: flex-start;*/
    /*padding: 0px;*/
    /*margin: 0px;*/
    /*display: inline-block;*/
    height: 100%;
    width: 50px;
    margin-right: 10px;
    display: inline-block;
    float: left;
  }

  .topBtns {
    background-color: #534e44;
    height: 30px;
    width: 100%;
    padding: 10px;
    color: white;
    font-weight: bold;
    font-size: 18px;
  }
</style>
